<template>
  <div>
    <div class="record-manage">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="tab in tabValue"
          :key="tab.name"
          :label="tab.label"
          :name="tab.name"
        >
        </el-tab-pane>
      </el-tabs>

      <!-- 将组件移到循环外部，根据 activeName 动态渲染 -->
      <div class="tab-content">
        <registered
          v-if="activeName === 'registered'"
          :patientId="props.patientId"
          :selectedDate="props.selectedDate"
        />
        <disease
          v-if="activeName === 'disease'"
          :patientId="props.patientId"
          :selectedDate="props.selectedDate"
        />
        <follow
          v-if="activeName === 'follow'"
          :patientId="props.patientId"
          :selectedDate="props.selectedDate"
        />
        <inspection
          v-if="activeName === 'inspection'"
          :patientId="props.patientId"
          :selectedDate="props.selectedDate"
        />
        <examine
          v-if="activeName === 'examine'"
          :patientId="props.patientId"
          :selectedDate="props.selectedDate"
        />
        <patientDelivery
          v-if="activeName === 'patientDelivery'"
          :patientId="props.patientId"
          :selectedDate="props.selectedDate"
        />
        <execute
          v-if="activeName === 'execute'"
          :patientId="props.patientId"
          :selectedDate="props.selectedDate"
        />
        <!-- 会员流水 tab 暂时没有对应组件 -->
        <div v-if="activeName === 'device'" class="tab-placeholder">
          <el-empty description="会员流水功能开发中..." />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { TabsPaneContext } from 'element-plus';
import registered from './registered.vue';
import follow from './follow.vue';
import disease from './disease.vue';
import examine from './examine.vue';
import inspection from './inspection.vue';
import execute from './execute.vue';
import patientDelivery from './patientDelivery.vue';
interface TabItem {
  label: string;
  name: string;
}
const props = defineProps<{
  patientId: number | null;
  selectedDate: string;
}>();
const tabValue: TabItem[] = [
  { label: '预约记录', name: 'registered' },
  { label: '病历记录', name: 'disease' },
  { label: '随访记录', name: 'follow' },
  { label: '检验记录', name: 'inspection' },
  { label: '检查记录', name: 'examine' },
  { label: '执行记录', name: 'execute' },
  { label: '发药记录', name: 'patientDelivery' },
  { label: '会员流水', name: 'device' },
];
const activeName = ref('registered');
const handleClick = (tab: TabsPaneContext, event: Event) => {
  //console.log(tab.props.name, event);
  activeName.value = String(tab.props.name || ''); // 更新当前激活的标签页
};
</script>

<style lang="scss" scoped>
.tab-content {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  color: var(--text-color-primary);
  font-size: 16px;
  line-height: 1.6;

  /* 响应式设计 */
  @media (max-width: 768px) {
    font-size: 14px;
    min-height: 300px;
  }
}

.tab-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;

  .el-empty {
    padding: 40px 0;
  }
}
::v-deep(.el-tabs__item) {
  width: 130px !important; /* 设置每个tab的宽度 */
}
.record-manage {
  height: 460px;
  margin-top: 10px;
  background: #ffffff;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
  border-radius: 12px 12px 12px 12px;
}
</style>
<style lang="scss"></style>
